<template>
	<div>
		<md-toolbar class="md-dense" md-elevation="0">
			<span class="md-body-1">{{seriesName}}{{getLangText(label.chartTitle)}}</span>
			<span class="md-toolbar-section-end">
				<!-- <md-button class="md-icon-button" @click="sendStyle" v-show="isShow">
					<i class="iconfont iconsave"></i>
				</md-button>-->
				<md-button class="md-icon-button" @click="sendStyle">
					<i :class="['iconfont',isShow?'iconsave':'iconright']"></i>
				</md-button>
			</span>
		</md-toolbar>
		<div v-if="isShow">
			<div style="padding:0 8px;">
				<md-field>
					<label>{{getLangText(label.name)}}</label>
					<md-input v-model="pieSeries.name"></md-input>
				</md-field>

				<div class="table-row-item">
					<span>{{getLangText(label.color)}}:</span>
					<span>
						<md-button class="md-icon-button" @click="addColorPicker">
							<i class="iconfont iconadd"></i>
						</md-button>
					</span>
				</div>

				<div class="table-row-item" v-for="(item,idx) in pieSeries.color">
					<span></span>
					<span>
						<span
							class="color-span"
							:style="{background:pieSeries.color[idx]}"
							@click="showColorPicker(item,idx)"
						></span>
						{{pieSeries.color[idx]}}
						<md-button class="md-icon-button" @click="delColorPicker(idx)">
							<i class="iconfont iconshanchu"></i>
						</md-button>
					</span>
				</div>

				<color-picker
					:lang-type="langType"
					:rgba="picker.result"
					@color-result="onColorPicker"
					:show-picker="picker.show&&picker.current=='color'"
				></color-picker>

				

				<md-field>
					<label>{{getLangText(label.startAngle)}}</label>
					<md-input v-model="pieSeries.startAngle"></md-input>
				</md-field>

				<md-field>
					<label>{{getLangText(label.minAngle)}}</label>
					<md-input v-model="pieSeries.minAngle"></md-input>
				</md-field>

				<md-field>
					<label>{{getLangText(label.minShowLabelAngle)}}</label>
					<md-input v-model="pieSeries.minShowLabelAngle"></md-input>
				</md-field>
				<div style="display:flex;">
					<md-field style="width:135px;">
						<label>{{getLangText(label.center)}}X</label>
						<md-input v-model="pieSeries.center[0]"></md-input>
					</md-field>
					<md-field style="width:135px;margin-left:8px;">
						<label>{{getLangText(label.center)}}Y</label>
						<md-input v-model="pieSeries.center[1]"></md-input>
					</md-field>
				</div>
				<div style="display:flex;">
					<md-field style="width:135px;">
						<label>{{getLangText(label.radius)}}X</label>
						<md-input v-model="pieSeries.radius[0]"></md-input>
					</md-field>
					<md-field style="width:135px;margin-left:8px;">
						<label>{{getLangText(label.radius)}}Y</label>
						<md-input v-model="pieSeries.radius[1]"></md-input>
					</md-field>
				</div>

				<div class="table-row-item">
					<span>{{getLangText(label.clockwise)}}:</span>
					<span>
						{{getLangText(label.no)}}
						<md-switch v-model="pieSeries.clockwise"></md-switch>
						{{getLangText(label.yes)}}
					</span>
				</div>

				<md-field>
					<label>{{getLangText(label.roseType)}}</label>
					<md-select v-model="pieSeries.roseType">
						<md-option :key="item.en" :value="item.en" v-for="item in roseType">{{getLangText(item)}}</md-option>
					</md-select>
				</md-field>

				<div class="table-row-item">
					<span>{{getLangText(label.labelLine)+getLangText(label.show)}}:</span>
					<span>
						{{getLangText(label.hide)}}
						<md-switch v-model="pieSeries.labelLine.show"></md-switch>
						{{getLangText(label.show)}}
					</span>
				</div>

				<div class="table-row-item">
					<span>{{getLangText(label.labelLine)+getLangText(label.smooth)}}:</span>
					<span>
						{{getLangText(label.no)}}
						<md-switch v-model="pieSeries.labelLine.smooth"></md-switch>
						{{getLangText(label.yes)}}
					</span>
				</div>

				<md-field>
					<label>{{getLangText(label.labelLine)+getLangText(label.length)}}1</label>
					<md-input v-model="pieSeries.labelLine.length"></md-input>
				</md-field>
				<md-field>
					<label>{{getLangText(label.labelLine)+getLangText(label.length)}}2</label>
					<md-input v-model="pieSeries.labelLine.length2"></md-input>
				</md-field>
				<div class="table-row-item">
					<span>{{getLangText(label.emphasis)+getLangText(label.labelLine)+getLangText(label.show)}}:</span>
					<span>
						{{getLangText(label.hide)}}
						<md-switch v-model="pieSeries.labelLine.emphasis.show"></md-switch>
						{{getLangText(label.show)}}
					</span>
				</div>
			</div>
			<line-style
				:lang-type="langType"
				:line-name="getLangText(label.labelLine)"
				:option="pieSeries.labelLine.lineStyle"
				@line-style-result="onLineStyle"
			></line-style>
			<line-style
				:lang-type="langType"
				:line-name="getLangText(label.emphasis)+getLangText(label.labelLine)"
				:option="pieSeries.labelLine.emphasis.lineStyle"
				@line-style-result="onLineStyleEmphasis"
			></line-style>

			<label-style :lang-type="langType" :option="pieSeries.label" @label-style-result="onLabelStyle"></label-style>
			<item-style :lang-type="langType" :option="pieSeries.itemStyle" @item-style-result="onItemStyle"></item-style>

			<label-style
				:lang-type="langType"
				:label-name="getLangText(label.emphasis)"
				:option="pieSeries.emphasis.label"
				@label-style-result="onLabelStyleEmphasis"
			></label-style>
			<item-style
				:lang-type="langType"
				:item-name="getLangText(label.emphasis)"
				:option="pieSeries.emphasis.itemStyle"
				@item-style-result="onItemStyleEmphasis"
			></item-style>
		</div>
	</div>
</template>
<script>
	import LabelStyle from "@/components/comp/LabelStyle";
	import ItemStyle from "@/components/comp/ItemStyle";
	import LineStyle from "@/components/comp/LineStyle";

	import ColorPicker from "@/components/comp/ColorPicker";
	export default {
		name: "PieSeries",
		props: {
			langType: {
				type: String,
				default: window.localStorage.getItem("langType")
			},
			option: {
				type: Object,
				default: function() {
					return {};
				}
			},
			seriesName: {
				type: String,
				default: ""
			}
		},
		components: {
			"label-style": LabelStyle,
			"item-style": ItemStyle,
			"line-style": LineStyle,
			"color-picker": ColorPicker
		},
		data: () => ({
			label: {
				chartTitle: { zh: "饼图", en: "pieChart" },
				symbol: { zh: "标记图形", en: "symbol" },
				symbolSize: { zh: "标记大小", en: "symbolSize" },
				name: { zh: "系列名称", en: "name" },
				symbolRotate: { zh: "标记旋转", en: "symbolRotate" },
				showSymbol: { zh: "标记显示", en: "showSymbol" },
				showAllSymbol: { zh: "显示所有标记", en: "showAllSymbol" },
				show: { zh: "显示", en: "show" },
				hide: { zh: "隐藏", en: "hide" },
				yes: { zh: "是", en: "yes" },
				no: { zh: "否", en: "no" },

				smooth: { zh: "平滑曲线", en: "smooth" },
				label: { zh: "标签", en: "label " },
				position: { zh: "位置", en: "position" },
				distance: { zh: "与图形距离", en: "distance" },
				rotate: { zh: "旋转", en: "rotate" },
				formatter: { zh: "模板", en: "formatter" },
				emphasis: { zh: "强调", en: "emphasis" },
				labelLine: { zh: "引导线", en: "labelLine" },
				length: { zh: "长度", en: "length" },
				clockwise: { zh: "顺时针排布", en: "clockwise" },
				startAngle: { zh: "起始角度", en: "startAngle" },
				minAngle: { zh: "最小角度", en: "minAngle" },
				minShowLabelAngle: {
					zh: "小于此角度不显示标签",
					en: "minShowLabelAngle"
				},
				roseType: { zh: "南丁格尔图", en: "roseType" },
				center: { zh: "中心坐标", en: "center" },
				radius: { zh: "半径", en: "radius" },
				color: { zh: "图形颜色", en: "color" }
			},
			isShow: false,
			pieSeries: {
				color: [],
				type: "pie",
				name: "",
				startAngle: 90,
				clockwise: true,
				minAngle: 0,
				minShowLabelAngle: 0,
				roseType: false,
				center: ["50%", "50%"],
				radius: [0, "75%"],
				label: {},
				labelLine: {
					show: true,
					length: "",
					length2: "",
					smooth: false,
					lineStyle: {},
					emphasis: {
						show: true,
						lineStyle: {}
					}
				},
				itemStyle: {
					
				},

				emphasis: {
					label: {},
					itemStyle: {
						
					}
				}
			},
			roseType: [
				{ zh: "否", en: false },
				{ zh: "圆心角表百分比,半径表值大小", en: "radius" },
				{ zh: "圆心角相同,半径表值大小", en: "area" }
			],
			labelPosition: [
				{ zh: "上侧", en: "top" },
				{ zh: "左侧", en: "left" },
				{ zh: "右侧", en: "right" },
				{ zh: "下侧", en: "bottom" },
				{ zh: "内部", en: "inside" },
				{ zh: "内左", en: "insideLeft" },
				{ zh: "内右", en: "insideRight" },
				{ zh: "内上", en: "insideTop" },
				{ zh: "内下", en: "insideBottom" },
				{ zh: "内上左", en: "insideTopLeft" },
				{ zh: "内下左", en: "insideBottomLeft" },
				{ zh: "内上右", en: "insideTopRight" },
				{ zh: "内下右", en: "insideBottomRight" }
			],
			showList: [
				{ zh: "自动", en: "auto" },
				{ zh: "是", en: true },
				{ zh: "否", en: false }
			],

			borderType: [
				{ zh: "实线", en: "solid" },
				{ zh: "虚线", en: "dashed" },
				{ zh: "点线", en: "dotted" }
			],
			picker: {
				show: false,
				current: "",
				idx: 0,
				result: ""
			},
			originOption:'',
			isParse:false
		}),

		watch: {
			isShow() {
				if (this.isShow) {
					this.parseObj();
				} else {
					this.picker.show = false;
				}
			},
			pieSeries:{
            deep:true,
            handler(){
			   if(this.isShow&&!this.isParse)
			   this.$emit("series-result", JSON.parse(JSON.stringify(this.pieSeries)));
            }
        }
		},
		methods: {
			showColorPicker(item, idx) {
				if (this.picker.idx != idx || !this.picker.show) {
					this.picker.current = "color";
					this.picker.result = item;
					this.picker.idx = idx;
					this.picker.show = true;
				} else {
					this.picker.show = false;
				}
			},
			onColorPicker(op) {
				this.pieSeries.color[this.picker.idx] = op.rgba;
			},
			addColorPicker() {
				this.pieSeries.color.push("#FFF");
			},
			delColorPicker(idx) {
				this.pieSeries.color.splice(idx, 1);
			},

			onLineStyle(result) {
				this.pieSeries.labelLine.lineStyle = result;
			},
			onLineStyleEmphasis(result) {
				this.pieSeries.labelLine.emphasis.lineStyle = result;
			},

			onLabelStyle(result) {
				this.pieSeries.label = result;
			},
			onItemStyle(result) {
				this.pieSeries.itemStyle = result;
			},

			onLabelStyleEmphasis(result) {
				this.pieSeries.emphasis.label = result;
			},
			onItemStyleEmphasis(result) {
				this.pieSeries.emphasis.itemStyle = result;
			},

			sendStyle() {
				this.isShow = this.isShow ? false : true;
				if (!this.isShow) {
					this.$emit("series-result", JSON.parse(JSON.stringify(this.pieSeries)));
				}
			},
			parseObj() {
				if(!this.option||JSON.stringify(this.option)=='{}')return;
				this.isParse=true;
				for (var key in this.option) {
					if (key == "labelLine") {
						for (var k in this.option[key]) {
							this.pieSeries[key][k] = this.option[key][k];
						}
						if (!("emphasis" in this.option[key])) {
							this.pieSeries[key].emphasis = {
								show: true,
								lineStyle: {}
							};
						} else {
							this.pieSeries[key].emphasis = this.option[key].emphasis;
						}
					} else {
						this.pieSeries[key] = this.option[key];
					}
				}
				this.originOption=JSON.stringify(this.pieSeries);
				var that=this;
				setTimeout(() => {
					that.isParse=false;
				}, 100);
			},
		colseOption() {
				this.isShow = false;
				if (this.originOption != JSON.stringify(this.pieSeries)) {
					this.$emit("series-result", this.pieSeries);
				}
			},
			listenEvent() {
				this.app.$on("close-option", this.colseOption);
			},
			offEvent() {
				this.app.$off("close-option", this.colseOption);
			}
		},
		mounted() {
			this.listenEvent();
		},
		beforeDestroy() {
			this.offEvent();
		}
	};
</script>
